<template>
  <div class="page">
    <div class="page-breadcrumb">
      <el-breadcrumb class="strong" separator="/">
        <el-breadcrumb-item :to="{ path: '/work/normalList' }">工单列表</el-breadcrumb-item>
        <el-breadcrumb-item>补工单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <v-pageSearch>
      <el-form :inline="true">
         <el-form-item>
           <el-button  size="small" type="primary" @click="toAdd">新增</el-button>
         </el-form-item>
      </el-form>
    </v-pageSearch>
    
    <el-form ref="order" label-width="80px" :model="order" class="form-small"style="margin-top:10px;">
      <div v-for="(data, index) in order.form" :key="data.pro">
        <el-form-item label="项目名称">
          <el-col :span="8">
            <el-select size="small" v-model="data.pro" filterable  placeholder="请输入项目名称关键字" style="width:80%">
              <el-option v-for="item in order.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8" v-if="index!=0">
            <el-button size="small" type="danger" icon="delete" @click="toRemove(index)"> 移除</el-button>
          </el-col>
          <el-col :span="8" v-else>
            <div class="block">
              <el-date-picker
                size="small"
                v-model="order.value1"
                type="date"
                placeholder="选择日期"
                :picker-options="order.pickerOptions0">
              </el-date-picker>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item label="工作内容">
          <div>
            <tinymce :height='120' v-model="data.content"></tinymce>
          </div>
          <!--<div class='editor-content' v-html='data.content'></div>-->
        </el-form-item>
      </div>
      <el-form-item label="加班时间" 
        prop="overTime"
        :rules="[
          { required: false, message: ''},
          { type: 'number', message: '加班时间必须为数字值'}
        ]"
      >
        <el-input size="small" v-model.number="order.overTime" placeholder="xx小时，默认0小时" style="width:193px"></el-input>
      </el-form-item>
      <el-form-item label="请假时间" 
        prop="date"
        :rules="[
          { required: false, message: ''},
          { type: 'number', message: '请假时间必须为数字值'}
        ]"
      >
        <el-input size="small" v-model.number="order.date" placeholder="xx小时，默认0小时" style="width:193px"></el-input>
      </el-form-item>
      <el-form-item label="当前时间">
        <h3 style="font-weight:400;">{{nowDate}}</h3>
      </el-form-item>
      <el-form-item label="">
        <el-row type="flex" justify="center">
          <el-col :span="3">
            <el-button type="success" @click="onSubmit('order')"><i class="fa fa-check fa-lg"></i> &nbsp;提交</el-button>
          </el-col>
          <el-col :span="3">
            <v-pageBack align='right' style="padding:0;">
            </v-pageBack>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    
  </div>
</template>

<script>
import Tinymce from '@/components/common/Tinymce'
import util from '../../util/util'

export default {
  components: { Tinymce },
  data() {
    return {
      order: {
        options: [
          {
            value: '选项1',
            label: 'Mes'
          }, {
            value: '选项2',
            label: '圆通项目'
          }, {
            value: '选项3',
            label: '韵达项目'
          }, {
            value: '选项4',
            label: 'PDA项目'
          }, {
            value: '选项5',
            label: 'webApp项目'
          }
        ],
        pickerOptions0: {
          disabledDate(time) {
							return time.getTime() > Date.now()-1000*60*60*24;
					}
        },
        value1: "",
        form: [
          {
            content: '',  
            pro: ''
          }
        ],
        overTime: 0,
        date: 0
      },
      nowDate: util.formatDate.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
    }
  },
  mounted() {
    let  _this = this;
    this.timer = setInterval(function(){
      _this.nowDate = util.formatDate.format(new Date(), 'yyyy-MM-dd hh:mm:ss');
    },1000);
  },
  beforeDestory(){
    if(this.timer){
      clearInterval(this.timer)
    }
  },
  methods: {
    toAdd(){
      this.order.form.push(
        {
          content: '',
          pro: ''
        }
      )
    },
    toRemove(index){
      this.order.form.splice(index);
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        // 提交验证
        let arr = this.order.form;
        let value = this.order.value1;
        let flag = true;
        let validFun = function(){
          for(let ele of arr){
            if((ele.content == '') || (ele.pro == '') || (value == '')){
              flag = false;
            }
          }
        };
        validFun();
        if (flag && valid) {
          console.log(this.order);
          alert('submit!');
        } else {
          this.$message({
            message: '请完善工单信息！再提交',
            type: 'warning'
          });
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.editor-content{
  margin-top: 20px;
}
</style>
